<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    
    <div id="wenben"></div>

    <script>
        //创建 XMLHTTPrequest对象
        function createXMLHttpRequest(){
            var httpRequest;
            if(window.XMLHttpRequest){
                httpRequest = new XMLHttpRequest();
            }else{
                try{
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP")
                }catch(e){
                    try{
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP")
                    }catch(e){

                    }
                }
            }
            return httpRequest
        }

        // var xml = createXMLHttpRequest();
        // console.log(xml)

        var bant = document.getElementById('btn')
        bant.addEventListener('click',function(){
            //实现ajax的异步交互 
            //创建对象
            var xhr = createXMLHttpRequest()
            //创建连接
            xhr.open('get','https://v1.hitokoto.cn/')
            //发送数据
            xhr.send(null);
            //监听返回状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr.responseText)
                    document.getElementById("wenben").innerHTML =  xhr.responseText
                    
                }
            }

        })

    </script>
</body>
</html>